<template>
  <div id="temporaryPlanTable">
    <div class="temporaryPlanTable">
      <span class="temporaryPlanTableTitle">施工单位：</span>
      <el-select v-model="temporaryPlanObj.applyOrgId" placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <span class="temporaryPlanTableTitle">计划状态：</span>
      <el-select
        v-model="temporaryPlanObj.approveStatusCode"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
      <span class="temporaryPlanTableTitle">日期：</span>
      <el-date-picker
        v-model="temporaryPlanObj.date"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
    </div>
    <div class="temporaryPlanTableBtn flex">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="sendKey(2)"
          >新增</el-button
        >
      </div>
      <div>
        <el-button type="primary" @click="serch()" style="margin-left: 10px"
          >查询</el-button
        >
        <el-button @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="temporaryPlanTableTable">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        header-row-class-name="formTable"
        height="620"
      >
        <el-table-column
          align="center"
          prop="workDate"
          label="临时计划"
          width="150"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="applyOrgName"
          label="申请单位"
          width="250"
        >
          <template slot-scope="scope">
            <span style="color: #fcca00"> {{ scope.row.applyOrgName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="applyUserName"
          label="申请人"
          width="100"
        >
        </el-table-column>
        <el-table-column align="center" prop="phone" label="联系电话">
        </el-table-column>
        <el-table-column
          align="center"
          prop="applyTime"
          label="申请时间"
          width="180"
        >
        </el-table-column>

        <el-table-column align="center" prop="approveStatusName" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.approveStatus == 99" style="color: red">
              {{ scope.row.approveStatusName }}</span
            >
            <span v-else style="color: #409eff">
              {{ scope.row.approveStatusName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" prop="translate" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.approveStatusName"
              type="text"
              @click="sendKey(3, scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.canApprove == 1"
              type="text"
              @click="approval(scope.row.procInstId, scope.row.id)"
              >审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="temporaryPlanTabletemporaryPlanTable">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="temporaryPlanObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      width="30%"
      title="审批流程"
      :visible.sync="innerVisible"
      append-to-body
      :destroy-on-close="false"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="ruleForm.approveOperation">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="批复意见" prop="comment">
          <el-input type="textarea" v-model="ruleForm.comment"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getOrgList } from "/src/http/productSchedule/userMg.js";
import {
  temporaryPlanGetApproveStatusList,
  temporaryPlanGetPage,
  temporaryPlanApprove,
  gettemporaryPlanById,
} from "/src/http/productSchedule/temporaryPlan.js";
export default {
  props: ["getKey"],
  data() {
    return {
      options: [],
      options2: [],
      value: "",
      value1: "",
      tableData: [],
      currentPage: 1,
      temporaryPlanObj: {
        approveStatusCode: "",
        applyOrgId: "",
        date: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      ruleForm: {
        procInstId: "",
        approveOperation: "",
        comment: "",
      },
      innerVisible: false,
    };
  },
  components: {},
  created() {},
  mounted() {
    this.initialize();
    this.serch();
  },
  methods: {
    handleSizeChange(val) {
      this.temporaryPlanObj.pageSize = val;
      this.serch();
    },
    handleCurrentChange(val) {
      this.temporaryPlanObj.pageNum = val;
      this.serch();
    },
    sendKey(num, id) {
      this.getKey(num, id);
    },
    //初始化
    async initialize() {
      try {
        this.options = await temporaryPlanGetApproveStatusList().then((res) => {
          return res.data;
        });
        this.options2 = await getOrgList().then((res) => {
          return res.data;
        });
        // this.temporaryPlanObj.tableData = await weekPlanGetPage().then((res) => {
        //   console.log(res);
        //   return res.data.records;
        // });
      } catch (error) {
        console.log("接口调用出错::: ", error);
      }
    },
    //搜索
    async serch() {
      // let obj = {};
      // Object.getOwnPropertyNames(this.temporaryPlanObj).forEach((key) => {
      //   if (this.weeklyPlanObj[key]) {
      //     obj[key] = this.weeklyPlanObj[key];
      //   }
      // });
      // console.log(obj);
      try {
        this.tableData = await temporaryPlanGetPage({
          pageNum: this.temporaryPlanObj.pageNum,
          pageSize: this.temporaryPlanObj.pageSize,
          approveStatusCode: this.temporaryPlanObj.approveStatusCode,
          applyOrgId: this.temporaryPlanObj.applyOrgId,
          date: this.temporaryPlanObj.date,
        }).then((res) => {
          console.log(res.data.records);
          this.total = res.data.total;
          return res.data.records;
        });
      } catch (error) {
        console.log("接口调用出错::: ", error);
      }
    },
    //审批
    async submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });

      console.log(formName);
      let obj = this.ruleForm;
      obj.pzzysjStart = this.ruleForm.pzzysj[0];
      obj.pzzysjEnd = this.ruleForm.pzzysj[1];
      obj.procInstId = this.procInstId;
      delete obj.pzzysj;
      console.log(obj);
      try {
        await temporaryPlanApprove(obj).then((res) => {
          if (res.code == 200) {
            this.innerVisible = false;
            this.$message({
              message: "审批完成",
              type: "success",
            });
            this.serch();
          } else {
            this.$message.error(res.message);
          }
        });
      } catch (error) {
        console.log("接口调用出错::: ", error);
      }
    },
    // 审批弹窗，数据回显
    async approval(procInstId, id) {
      this.innerVisible = true;
      this.procInstId = procInstId;
      try {
        await gettemporaryPlanById({ id: id }).then((res) => {
          if (res.code == 200) {
            this.ruleForm = res.data;
            res.data.pzzysj = [res.data.pzzysjStart, res.data.pzzysjEnd];
            // this.$message({
            //   message: "成功添加",
            //   type: "success",
            // });
          } else {
            this.$message.error(res.message);
          }
        });
      } catch (error) {
        console.log("接口调用出错::: ", error);
      }
    },
    reset() {
      this.temporaryPlanObj = {
        pageNum: 1,
        pageSize: 10,
        approveStatusCode: "",
        applyOrgId: "",
        date: "",
      };
      this.serch();
    },
  },
};
</script>

<style lang="less" scoped>
#temporaryPlanTable {
  .temporaryPlanTable {
    margin-left: 3rem;
  }
  .temporaryPlanTableTitle {
    font-size: 14px;
    padding: 0 1rem;
    font-weight: 600;
  }
  .temporaryPlanTableBtn {
    margin: 1rem 4rem;
  }
  .temporaryPlanTableTable {
    width: 95%;
    margin: 0 auto;
  }
  .temporaryPlanTabletemporaryPlanTable {
    position: absolute;
    bottom: 1rem;
    right: 5rem;
  }
}
</style>
<style lang="less"></style>
